// import echarts from 'echarts'
// import $ from 'jQuery'
// import 'peity';
//
// export default {
//   name: 'kt3Screen',
//   data() {
//     return {
//       evaluate: [
//         {
//           score: 50,
//           data1: '4,5,6,7,8',
//           data2: '5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2',
//           data3: '5,3,9,6,5,9,7,3,5,2',
//           data4: '5,3,2,-1,-3,-2,2,3,5,2',
//           data5: '5,3,2,-1,-3,-2,2,3,5,2',
//           data6: '5,3,2,-1,-3,-2,2,3,5,2'
//         },
//         {
//           score: 60,
//           data1: '6,7,8,9,10',
//           data2: '5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7',
//           data3: '5,3,9,6,5,9,7,3,5,2',
//           data4: '5,3,2,-1,-3,-2,2,3,5,2',
//           data5: '5,3,2,-1,-3,-2,2,3,5,2',
//           data6: '5,3,2,-1,-3,-2,2,3,5,2'
//         },
//         {
//           score: 70,
//           data1: '8,9,10,11,10',
//           data2: '6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2',
//           data3: '5,3,9,6,5,9,7,3,5,2',
//           data4: '5,3,2,-1,-3,-2,2,3,5,2',
//           data5: '5,3,2,-1,-3,-2,2,3,5,2',
//           data6: '5,3,2,-1,-3,-2,2,3,5,2'
//         },
//         {
//           score: 65,
//           data1: '8,9,10,11,10',
//           data2: '6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2',
//           data3: '5,3,9,6,5,9,7,3,5,2',
//           data4: '5,3,2,-1,-3,-2,2,3,5,2',
//           data5: '5,3,2,-1,-3,-2,2,3,5,2',
//           data6: '5,3,2,-1,-3,-2,2,3,5,2'
//         },
//         {
//           score: 80,
//           data1: '8,9,10,11,10',
//           data2: '6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2',
//           data3: '5,3,9,6,5,9,7,3,5,2',
//           data4: '5,3,2,-1,-3,-2,2,3,5,2',
//           data5: '5,3,2,-1,-3,-2,2,3,5,2',
//           data6: '5,3,2,-1,-3,-2,2,3,5,2'
//         },
//         {
//           score: 85,
//           data1: '8,9,10,11,10',
//           data2: '6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2',
//           data3: '5,3,9,6,5,9,7,3,5,2',
//           data4: '5,3,2,-1,-3,-2,2,3,5,2',
//           data5: '5,3,2,-1,-3,-2,2,3,5,2',
//           data6: '5,3,2,-1,-3,-2,2,3,5,2'
//         }
//       ],
//       tableData: [{
//         prop1: '阿里云-CPU',
//         prop2: '100',
//         prop3: '200',
//         prop4: '300'
//       },{
//         prop1: '腾讯云-CPU',
//         prop2: '120',
//         prop3: '250',
//         prop4: '370'
//       },{
//         prop1: '火山云-CPU',
//         prop2: '220',
//         prop3: '350',
//         prop4: '570'
//       },{
//         prop1: '联通云-CPU',
//         prop2: '250',
//         prop3: '380',
//         prop4: '630'
//       }],
//     }
//   },
//   created() {
//   },
//   mounted() {
//     this.makePieChart()
//     $(this.$refs.barChart).peity("bar", {width: 64}); // 初始化条形图
//     $("span.pie").peity("pie", {width: 64})
//     $(".updating-chart").peity("line", {width: 64})
//     $(".bar").peity("bar", {width: 64})
//     this.makeLineChart()
//   },
//   methods: {
//     makeLineChart() {
//       const chart10 = echarts.init(document.getElementById('id10'), 'light')
//       let chart10Option = {
//         tooltip: {
//           formatter: '{a} <br/>{b} : {c}%'
//         },
//         series: [
//           {
//             name: 'Pressure',
//             type: 'gauge',
//             detail: {
//               formatter: '{value}'
//             },
//             data: [
//               {
//                 value: 50,
//                 name: 'SCORE'
//               }
//             ]
//           }
//         ]
//       };
//       chart10.setOption(chart10Option)
//
//       const chart11 = echarts.init(document.getElementById('id11'), 'light')
//       let chart11Option = {
//         tooltip: {
//           trigger: 'axis'
//         },
//         backgroundColor: 'transparent',
//         grid: {
//           left: '5%',
//           right: '10%',
//           top: '10%',
//           bottom: '10%',
//           containLabel: true
//         },
//         legend: {
//           data: ['阿里云', '腾讯云'],
//           textStyle: {
//             color: '#FFFFFF' // Set legend text color to white
//           },
//           top: '0%' // Position the legend at the top of the chart
//         },
//         xAxis: {
//           type: 'time',
//           boundaryGap: false,
//           axisLabel: {
//             color: '#FFFFFF' // 设置 y 轴文字标注为白色
//           }
//         },
//         yAxis: {
//           type: 'value',
//           boundaryGap: [0, '100%'],
//           axisLabel: {
//             color: '#FFFFFF' // 设置 y 轴文字标注为白色
//           }
//         },
//         series: [
//           {
//             name: '阿里云',
//             type: 'line',
//             smooth: true,
//             symbol: 'none',
//             // data: this.recentExpense,
//             data: this.getDateAndData([10, 13, 14, 10, 13, 15, 12]),
//             itemStyle: {
//               color: '#6495ED'
//             }
//           }, {
//             name: '腾讯云',
//             type: 'line',
//             smooth: true,
//             symbol: 'none',
//             // data: this.shortTermExpense,
//             data: this.getDateAndData([8, 10, 11, 11, 13, 12, 10]),
//             itemStyle: {
//               color: '#f5b000'
//             }
//           }
//         ]
//       }
//       chart11.setOption(chart11Option)
//
//       const chart12 = echarts.init(document.getElementById('id12'), 'light')
//       let chart12Option = {
//         yAxis: {
//           type: 'category',
//           axisLine: {'show': false},
//           axisTick: {'show': false},
//           axisLabel: {
//             align: 'left',
//             padding: [0, 0, 0, -25],
//             fontSize: 12,
//             fontFamily: 'Alternate',
//             color: 'rgb(255, 255, 255, 0.5)',
//             rich: {
//               value: {
//                 lineHeight: 40
//               }
//             }
//           },
//           data: ['阿里', '华为', '火山', '腾讯', '百度']
//         },
//         xAxis: {
//           type: 'value',
//           show: false
//         },
//         series: [{
//           data: [10, 20, 25, 40, 75],
//           type: 'bar',
//           barWidth: 6,
//           itemStyle: {
//             normal: {
//               color: new echarts.graphic.LinearGradient(
//                 0, 0, 1, 0, [{offset: 0, color: 'rgb(95, 197, 233, 0.75)'}, {
//                   offset: 1,
//                   color: 'rgb(48, 124, 224, 0.75)'
//                 }]
//               )
//             }
//           }
//         }],
//         grid: {
//           right: '18%',
//           left: '15%'
//         }
//       };
//       chart12.setOption(chart12Option)
//     },
//     makePieChart() {
//       const chart1 = echarts.init(document.getElementById('id1'), 'light')
//       const chart2 = echarts.init(document.getElementById('id2'), 'light')
//       const chart3 = echarts.init(document.getElementById('id3'), 'light')
//       const chart4 = echarts.init(document.getElementById('id4'), 'light')
//       // const chart5 = echarts.init(document.getElementById('id5'), 'light')
//       // const chart6 = echarts.init(document.getElementById('id6'), 'light')
//       const chart7 = echarts.init(document.getElementById('id7'), 'light')
//       const chart8 = echarts.init(document.getElementById('id8'), 'light')
//       const chart9 = echarts.init(document.getElementById('id9'), 'light')
//
//       chart1.clear()
//       chart2.clear()
//       chart3.clear()
//       chart4.clear()
//       // chart5.clear()
//       // chart6.clear()
//       chart7.clear()
//       chart8.clear()
//       chart9.clear()
//
//       let option1 = {
//         series: [
//           {
//             name: '最低价格',
//             type: 'pie',
//             radius: ['20%', '40%'],
//             data: [
//               { value: 100, name: '最小' },
//               { value: 200, name: '最大' },
//               { value: 70, name: '预测' }
//             ]
//           }
//         ],
//         graphic: {
//           type: 'text',
//           left: 'center',
//           top: 'center',
//           style: {
//             text: '最低价格',
//             textAlign: 'center',
//             fill: '#FFFFFF', // Text color
//             fontSize: 8
//           }
//         }
//       };
//
//       let option2 = {
//         series: [
//           {
//             name: '最优性价',
//             type: 'pie',
//             radius: ['20%', '40%'],
//             data: [
//               { value: 100, name: '最小' },
//               { value: 200, name: '最大' },
//               { value: 70, name: '预测' }
//             ]
//           }
//         ],
//         graphic: {
//           type: 'text',
//           left: 'center',
//           top: 'center',
//           style: {
//             text: '最优性价',
//             textAlign: 'center',
//             fill: '#FFFFFF', // Text color
//             fontSize: 8
//           }
//         }
//       };
//
//       let option3 = {
//         series: [
//           {
//             name: '最优性能',
//             type: 'pie',
//             radius: ['20%', '40%'],
//             data: [
//               { value: 100, name: '最小' },
//               { value: 200, name: '最大' },
//               { value: 70, name: '预测' }
//             ]
//           }
//         ],
//         graphic: {
//           type: 'text',
//           left: 'center',
//           top: 'center',
//           style: {
//             text: '最优性能',
//             textAlign: 'center',
//             fill: '#FFFFFF', // Text color
//             fontSize: 8
//           }
//         }
//       };
//
//       let option4 = {
//         dataset: {
//           source: [
//             ['product', '2015', '2016', '2017'],
//             ['Matcha Latte', 43.3, 85.8, 93.7],
//             ['Milk Tea', 83.1, 73.4, 55.1],
//             ['Cheese Cocoa', 86.4, 65.2, 82.5],
//             ['Walnut Brownie', 72.4, 53.9, 39.1]
//           ]
//         },
//         xAxis: {
//           type: 'category',
//           axisLabel: {
//             color: '#FFFFFF' // 设置 y 轴文字标注为白色
//           }
//         },
//         yAxis: {
//           axisLabel: {
//             color: '#FFFFFF' // 设置 y 轴文字标注为白色
//           }
//         },
//         series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
//       };
//
//       chart1.setOption(option1)
//       chart2.setOption(option2)
//       chart3.setOption(option3)
//       chart4.setOption(option4)
//
//       // chart5.setOption(this.getOptionJson(0.35, "华为云"))
//       // chart6.setOption(this.getOptionJson(0.45, "百度云"))
//       chart7.setOption(this.getOptionJson(0.30, "阿里云"))
//       chart8.setOption(this.getOptionJson(0.35, "华为云"))
//       chart9.setOption(this.getOptionJson(0.45, "百度云"))
//
//       $(window).resize(function() {
//         chart1.resize()
//         chart2.resize()
//         chart3.resize()
//         chart4.resize()
//         chart5.resize()
//         chart6.resize()
//         chart7.resize()
//         chart8.resize()
//         chart9.resize()
//       })
//     },
//     getOptionJson(data, text) {
//       const option = {
//         series: [{
//           type: 'liquidFill',
//           backgroundStyle: {
//             borderWidth: 1,
//             borderColor: '#82CAFF',
//             color: '#FFFFFF'
//           },
//           itemStyle: {
//             shadowBlur: 0
//           },
//           outline: {
//             show: false
//           },
//           radius: '60%',
//           label: {
//             show: true,
//             position: ['50%', '50%'],
//             fontSize: 30,
//             color: '#504A4B'
//           },
//           labelLine: {
//             show: true
//           },
//           amplitude: 5,
//           animationDuration: 0,
//           color: ['#82CAFF'],
//           data: [data]
//         }],
//         title: {
//           text: text,
//           left: 'center',
//           top: '85%',
//           textStyle: {
//             color: '#FFFFFF',
//             fontSize: 14
//           }
//         }
//       }
//       return option
//     },
//     getDateAndData(arr) {
//       let begin = Date.parse(new Date())
//       let result = []
//       for (let i = 0; i < arr.length; i++) {
//         result.push([(begin + i * 1000 * 3600 * 24), arr[i]])
//       }
//       return result
//     }
//   }
// }
